import React, { useState } from "react";
import { Button } from "antd";
import { SettingOutlined } from "@ant-design/icons";
import "./index.css";

const App: React.FC = () => {
  const [hoverd, setHoverd] = useState<boolean>(false);

  const showContent = () => {
    setHoverd(true);
  };

  const hideContent = () => {
    setHoverd(false);
  };

  return (
    <dl
      className="classification"
      onMouseEnter={showContent}
      onMouseLeave={hideContent}
    >
      <dt>
        {hoverd && (
          <Button type="text" icon={<SettingOutlined />}>
            设置
          </Button>
        )}
      </dt>
      <dd>
        <div className="classification-item">
          <h2 style={{ borderLeftColor: "#5b8ff9" }}>产品资料分类</h2>
          <div>
            <span>产品发布</span>
            <span>产品介绍</span>
            <span>解决方案</span>
            <span>销售指南</span>
            <span>特性解读</span>
            <span>技术资料</span>
          </div>
        </div>
        <div className="classification-item">
          <h2 style={{ borderLeftColor: "#60bc9f" }}>解决方案</h2>
          <div>
            <span>数据灾备</span>
            <span>智能运维</span>
            <span>解决方案</span>
            <span>销售指南</span>
            <span>特性解读</span>
            <span>技术资料</span>
          </div>
        </div>
        <div className="classification-item">
          <h2 style={{ borderLeftColor: "#f9ad5b" }}>研发效能</h2>
          <div>
            <span>产品发布</span>
            <span>产品介绍</span>
            <span>解决方案</span>
            <span>销售指南</span>
            <span>特性解读</span>
            <span>技术资料</span>
          </div>
        </div>
        <div className="classification-item">
          <h2 style={{ borderLeftColor: "#5b8ff9" }}>产品标签</h2>
          <div>
            <span>产品发布</span>
            <span>产品介绍</span>
            <span>解决方案</span>
            <span>销售指南</span>
            <span>特性解读</span>
            <span>技术资料</span>
          </div>
        </div>
        <div className="classification-item">
          <h2 style={{ borderLeftColor: "#60bc9f" }}>行业标签</h2>
          <div>
            <span>产品发布</span>
            <span>产品介绍</span>
            <span>解决方案</span>
            <span>销售指南</span>
            <span>特性解读</span>
            <span>技术资料</span>
          </div>
        </div>
      </dd>
    </dl>
  );
};

export default App;
